<template>
  <div class="experiment-container">
    <el-tabs v-model="activeTop" type="card" @tab-click="handleTop">
      <el-tab-pane label="项目1" name="1"></el-tab-pane>
    </el-tabs>
    <div class="experiment-top">
      <div class="experiment-top-left group-border" style="padding:0 6px;">
        <div class="list-group">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="list-items">
                <div class="list-title list-title-pad10">批次序号：</div>
                <el-select v-model="value" placeholder="">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="list-items">
                <div class="list-title list-title-pad10">浓度序号：</div>
                <el-select v-model="value" placeholder="">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="list-group">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="list-items">
                <div class="list-title list-title-pad10">重复卡数：</div>
                <el-select v-model="value" placeholder="">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="list-items">
                <div class="list-title list-title-pad10">单卡次数：</div>
                <el-select v-model="value" placeholder="">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="list-group">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="list-items">
                <el-checkbox v-model="checked">固定间隔测试</el-checkbox>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="list-group">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="list-items">
                <el-checkbox v-model="checked">自动检测有卡</el-checkbox>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="experiment-top-center">
        <el-table :data="tableData" border ref="multipleTable" header-cell-class-name="table-header" height="30vh">
          <el-table-column label="序号" align="center" width="100" fixed>
            <template slot-scope="scope">{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}</template>
          </el-table-column>
          <el-table-column label="起点" align="center">
            <template slot-scope="scope">{{ scope.row.nickname || scope.row.wechat_nickname }}</template>
          </el-table-column>
          <el-table-column label="终点" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.sex == 1">男</span>
              <span v-if="scope.row.sex == 2">女</span>
            </template>
          </el-table-column>
          <el-table-column label="取值" align="center">
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
          </el-table-column>
          <el-table-column label="计算" align="center">
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="experiment-top-right">
        <el-table :data="tableData" border ref="multipleTable" header-cell-class-name="table-header" height="30vh">
          <el-table-column label="序号" align="center" width="100" fixed>
            <template slot-scope="scope">{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}</template>
          </el-table-column>
          <el-table-column label="P1" align="center">
            <template slot-scope="scope">{{ scope.row.nickname || scope.row.wechat_nickname }}</template>
          </el-table-column>
          <el-table-column label="P2" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.sex == 1">男</span>
              <span v-if="scope.row.sex == 2">女</span>
            </template>
          </el-table-column>
          <el-table-column label="P3" align="center">
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="debugging-handle-box">
      <el-button type="primary">新建批次</el-button>
      <el-button type="success" @click="handle(1)">进卡</el-button>
      <el-button type="danger" @click="handle(2)">丢卡</el-button>
      <el-button @click="handle(2)">测试</el-button>
      <el-button type="warning" @click="handle(2)">计算</el-button>
      <el-checkbox v-model="checked" style="margin-left:10px;">显示所有浓度</el-checkbox>
    </div>
    <div class="experiment-top">
      <div class="experiment-bottom-left">
        <div class="eacharts-group" id="eachartSings" style="height:420px;"></div>
      </div>
      <div class="experiment-bottom-right">
        <el-table :data="tableData" border ref="multipleTable" header-cell-class-name="table-header" height="25vh">
          <el-table-column label="序号" align="center" width="100" fixed>
            <template slot-scope="scope">{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}</template>
          </el-table-column>
          <el-table-column label="1" align="center">
            <template slot-scope="scope">{{ scope.row.nickname || scope.row.wechat_nickname }}</template>
          </el-table-column>
          <el-table-column label="2" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.sex == 1">男</span>
              <span v-if="scope.row.sex == 2">女</span>
            </template>
          </el-table-column>
          <el-table-column label="3" align="center">
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
          </el-table-column>
          <el-table-column label="4" align="center">
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
          </el-table-column>
          <el-table-column label="5" align="center">
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
          </el-table-column>
          <el-table-column label="6" align="center">
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
          </el-table-column>
          <el-table-column label="7" align="center">
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
          </el-table-column>
          <el-table-column label="8" align="center">
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
          </el-table-column>
        </el-table>
        <el-table :data="tableData" border ref="multipleTable" header-cell-class-name="table-header" height="25vh">
          <el-table-column label="序号" align="center" width="100" fixed>
            <template slot-scope="scope">{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}</template>
          </el-table-column>
          <el-table-column label="1" align="center">
            <template slot-scope="scope">{{ scope.row.nickname || scope.row.wechat_nickname }}</template>
          </el-table-column>
          <el-table-column label="2" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.sex == 1">男</span>
              <span v-if="scope.row.sex == 2">女</span>
            </template>
          </el-table-column>
          <el-table-column label="3" align="center">
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
          </el-table-column>
          <el-table-column label="4" align="center">
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
          </el-table-column>
          <el-table-column label="5" align="center">
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
          </el-table-column>
          <el-table-column label="6" align="center">
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
          </el-table-column>
          <el-table-column label="7" align="center">
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
          </el-table-column>
          <el-table-column label="8" align="center">
            <template slot-scope="scope">{{ scope.row.mobile }}</template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
  
  <script>
  import * as echarts from 'echarts';
import { isNumber } from 'lodash';
export default {
  name: 'experiment',
  data() {
    return {
      activeTop: '1',
      value: '',
      options: [{ value: '1', label: '1' }, { value: '2', label: '2' }],
      tableData: [],
      checked: false
    };
  },
  mounted() {
    this.eachartSing([{ planNum: 10, signInDate: 30 }]);
  },
  methods: {
    handleTop(e) {

    },
    handle() {

    },
    eachartSing(list) {
      var dom = document.getElementById('eachartSings');
      var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      let option = {
        legend: {
          data: ['计划人数', '签到人数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: list.map(o => o.signInDate)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '计划人数',
            type: 'line',
            stack: 'Total',
            data: list.map(o => (isNumber(Number(o.planNum)) ? Number(o.planNum) : 0))
          },
          {
            name: '签到人数',
            type: 'line',
            stack: 'Total',
            data: list.map(o => (isNumber(Number(o.signInNum)) ? Number(o.signInNum) : 0))
          }
        ]
      };
      myChart.setOption(option);
    },
  }
};
  </script>
  
  <style lang="less">
.experiment-container {
  padding: 0 10px;
  .debugging-handle-box {
    padding: 10px;
    display: flex;
    align-items: center;
  }
  .experiment-top {
    display: flex;
    .experiment-top-left {
      width: 33.33%;
    }
    .experiment-top-right {
      width: 33.33%;
    }
    .experiment-top-center {
      width: 33.33%;
      padding:0 10px;
    }
  }
  .experiment-bottom-left {
    width: 50%;
  }
  .experiment-bottom-right {
    width: 50%;
    padding-left: 10px;
  }
  .list-group {
    padding: 6px 0;
    .list-items {
      display: flex;
      align-items: center;
    }
    .list-title {
      font-size: 13px;
      color: #333;
      height: 32px;
      line-height: 32px;
      white-space: nowrap;
    }
    .list-title-right {
      text-align: right;
    }
    .list-title-pad10 {
      padding-right: 10px;
      min-width: 90px;
    }
  }
  .group-border {
    border: 1px solid #eee;
    border-radius: 6px;
  }
}
</style>